<template>
	<div class="bingtuBox">
		<div  ref="bingtu" :style="{width:width,height:height}"></div>
		<span class="left" @click="left"><</span>
		<span class="right" @click="right">></span>
		<span class="name">{{name}}</span>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default{
	data(){
		return {
			width:'100%',
			height:'250px',
			currIndex:0,
			name:'暂无数据'
		}
	},
	computed:{
		data(){
			return this.$store.state.all
		}
	},
	watch:{
		data(newData){
			this.updateChart();
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.bingtu,'westeros');
			let initOption={
				title:{
					text:'▋ 全国各省病例分析图',
					textStyle:{
						color:'#fff'
					},
					left:20,
					top:20
				},
				legend:{
					type:'scroll',
					// orient:'vertical',
					left:'10%',
					bottom:'2%',
					textStyle:{
						color:'#fff'
					}
				},
				tooltip:{},
				series:[
					{
						type:'pie',
						label:{
							show:false
						},
						emphasis:{
							label:{
								show:true
							}
						}
					}
				]
			}
			this.myChart.setOption(initOption);
		},
		updateChart(){
			const legrndData = this.data[this.currIndex].data.map(item=>{
				return item.name;
			})
			this.name = this.data[this.currIndex].name;
			this.myChart.setOption({
				legend:{
					data:legrndData
				},
				series:[
					{
						data:this.data[this.currIndex].data
					}
				]
			});
		},
		screenAdapter(){
			const offsetWidth = this.$refs.bingtu.offsetWidth /100*3.6;
			const adapterOption = {
			};
			this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		},
		left(){
			this.currIndex--;
			if(this.currIndex <0){
				this.currIndex = this.data.length-1
			}
			this.updateChart();
		},
		right(){
			this.currIndex++;
			if(this.currIndex > this.data.length-1){
				this.currIndex = 0
			}
			this.updateChart();
		}
	},
	mounted() {
		this.initChart();
		this.screenAdapter();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>

<style lang="less" scoped="scoped">
	.bingtuBox{
		width: 100%;
		position: relative;
		margin-bottom: 1em;
	}
	canvas{
		border-radius: 15px;
		background-color: rgba(0,0,0,.5);
	}
	.left{
		position: absolute;
		left: 10%;
		top: 130px;
		transform: translateY(-50%);
		cursor: pointer;
		color: #fff;
		z-index: 1000;
		font-size: 2rem;
	}
	.right{
		position: absolute;
		right: 10%;
		top: 130px;
		transform: translateY(-50%);
		cursor: pointer;
		color: #fff;
		z-index: 1000;
		font-size: 2rem;
	}
	.name{
		position: absolute;
		left: 80%;
		top: 200px;
		transform: translateY(-50%);
		cursor: pointer;
		color: #fff;
		z-index: 1000;
		font-size: 2rem;
	}
</style>
